<app-toast [message]="toast.message"></app-toast>

<div class="card">
  <h4 class="card-header">Register</h4>
  <div class="card-body">
    <form [formGroup]="registerForm" (ngSubmit)="register()">
      <div class="input-group" [ngClass]="setClassUsername()">
        <span class="input-group-text">
            <i class="fa fa-user"></i>
        </span>
        <input class="form-control" type="text" name="username"
               formControlName="username" placeholder="Username" autocomplete="username">
      </div>
      <div class="input-group" [ngClass]="setClassEmail()">
        <span class="input-group-text">
          <i class="fa fa-envelope"></i>
        </span>
        <input class="form-control" type="email" name="email"
               formControlName="email" placeholder="Email" autocomplete="email">
      </div>
      <div class="input-group" [ngClass]="setClassPassword()">
        <span class="input-group-text">
          <i class="fa fa-key"></i>
        </span>
        <input class="form-control" type="password" name="password"
               formControlName="password" placeholder="Password" autocomplete="new-password">
      </div>
      <div class="input-group">
        <span class="input-group-text">
          <i class="fa fa-black-tie"></i>
        </span>
        <select class="form-control" name="role" formControlName="role">
          <option value="" selected disabled>Role</option>
          <option value="user">User</option>
          <option value="admin">Admin</option>
        </select>
      </div>
      <button class="btn btn-primary" type="submit" [disabled]="!registerForm.valid">
        <i class="fa fa-user-plus"></i> Register
      </button>
    </form>
  </div>
</div>